<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业营销页常见区块</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 30px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        h1 {
            margin-bottom: 15px;
            font-size: 2.5rem;
        }

        .description {
            max-width: 800px;
            margin: 0 auto;
            font-size: 1.1rem;
        }

        .section {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
            transition: transform 0.3s ease;
        }

        .section:hover {
            transform: translateY(-5px);
        }

        .section-title {
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
            display: flex;
            align-items: center;
        }

        .section-title i {
            margin-right: 10px;
            color: #3498db;
        }

        .block-demo {
            border: 2px dashed #ddd;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            background: #f8f9fa;
        }

        .hero {
            text-align: center;
            padding: 60px 20px;
            background: linear-gradient(to right, #4e54c8, #8f94fb);
            color: white;
            border-radius: 8px;
        }

        .hero h2 {
            font-size: 2.2rem;
            margin-bottom: 15px;
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 25px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-button {
            display: inline-block;
            padding: 12px 30px;
            background: #ff6b6b;
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .cta-button:hover {
            background: #ff5252;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }

        .feature {
            text-align: center;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease;
        }

        .feature:hover {
            transform: translateY(-5px);
        }

        .feature i {
            font-size: 2.5rem;
            color: #3498db;
            margin-bottom: 15px;
        }

        .testimonials {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }

        .testimonial {
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            border-left: 4px solid #3498db;
        }

        .testimonial-text {
            font-style: italic;
            margin-bottom: 15px;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
        }

        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #3498db;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .pricing {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }

        .pricing-plan {
            padding: 30px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            text-align: center;
            border: 1px solid #eee;
            transition: all 0.3s ease;
        }

        .pricing-plan.popular {
            border: 2px solid #3498db;
            transform: scale(1.05);
        }

        .pricing-plan h3 {
            color: #2c3e50;
            margin-bottom: 15px;
        }

        .price {
            font-size: 2.5rem;
            color: #3498db;
            margin-bottom: 20px;
        }

        .price span {
            font-size: 1rem;
            color: #7f8c8d;
        }

        .pricing-features {
            list-style: none;
            margin: 20px 0;
            text-align: left;
        }

        .pricing-features li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }

        .pricing-features li:last-child {
            border-bottom: none;
        }

        .faq {
            margin: 20px 0;
        }

        .faq-item {
            margin-bottom: 15px;
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
        }

        .faq-question {
            padding: 15px;
            background: #f8f9fa;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .faq-answer {
            padding: 15px;
            background: white;
            display: none;
        }

        .faq-item.active .faq-answer {
            display: block;
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            padding: 30px;
            background: #2c3e50;
            color: white;
            border-radius: 10px;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin: 20px 0;
        }

        .footer-links a {
            color: #ddd;
            margin: 0 15px;
            text-decoration: none;
        }

        .footer-links a:hover {
            color: white;
        }

        .code-block {
            background: #2d3436;
            color: #f5f6fa;
            padding: 20px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 20px 0;
            font-family: 'Consolas', monospace;
            line-height: 1.5;
            display: none;
        }

        .toggle-code {
            display: inline-block;
            padding: 5px 15px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }

        @media (max-width: 768px) {

            .features,
            .testimonials,
            .pricing {
                grid-template-columns: 1fr;
            }

            .pricing-plan.popular {
                transform: none;
            }

            .hero h2 {
                font-size: 1.8rem;
            }

            .hero p {
                font-size: 1rem;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1>企业营销页常见区块</h1>
            <p class="description">探索现代企业营销页面中常用的设计区块及其实现方式</p>
        </header>

        <div class="section">
            <h2 class="section-title"><i class="fas fa-star"></i>1. 英雄区块 (Hero Section)</h2>
            <p>英雄区块是用户访问页面时首先看到的内容，通常包含主要价值主张和呼吁行动按钮。</p>

            <div class="block-demo">
                <div class="hero">
                    <h2>让您的业务更上一层楼</h2>
                    <p>我们的解决方案帮助数百家企业提高效率、增加收入并优化工作流程</p>
                    <a href="#" class="cta-button">免费试用30天</a>
                </div>
            </div>

            <button class="toggle-code" onclick="toggleCode('heroCode')">显示/隐藏代码</button>
            <div class="code-block" id="heroCode">
                &lt;div class="hero"&gt;<br>
                &nbsp;&nbsp;&lt;h2&gt;让您的业务更上一层楼&lt;/h2&gt;<br>
                &nbsp;&nbsp;&lt;p&gt;我们的解决方案帮助数百家企业提高效率、增加收入并优化工作流程&lt;/p&gt;<br>
                &nbsp;&nbsp;&lt;a href="#" class="cta-button"&gt;免费试用30天&lt;/a&gt;<br>
                &lt;/div&gt;
            </div>
        </div>

        <div class="section">
            <h2 class="section-title"><i class="fas fa-check-circle"></i>2. 价值主张/特性展示 (Value Proposition)</h2>
            <p>清晰展示产品或服务的核心价值和主要特性，帮助用户快速了解优势。</p>

            <div class="block-demo">
                <div class="features">
                    <div class="feature">
                        <i class="fas fa-bolt"></i>
                        <h3>极速性能</h3>
                        <p>业界领先的处理速度，提高工作效率</p>
                    </div>
                    <div class="feature">
                        <i class="fas fa-shield-alt"></i>
                        <h3>安全可靠</h3>
                        <p>银行级加密技术，保障数据安全</p>
                    </div>
                    <div class="feature">
                        <i class="fas fa-expand-arrows-alt"></i>
                        <h3>可扩展性</h3>
                        <p>随业务增长灵活扩展，满足不同需求</p>
                    </div>
                </div>
            </div>

            <button class="toggle-code" onclick="toggleCode('featuresCode')">显示/隐藏代码</button>
            <div class="code-block" id="featuresCode">
                &lt;div class="features"&gt;<br>
                &nbsp;&nbsp;&lt;div class="feature"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;i class="fas fa-bolt"&gt;&lt;/i&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;极速性能&lt;/h3&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;业界领先的处理速度，提高工作效率&lt;/p&gt;<br>
                &nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&lt;div class="feature"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;i class="fas fa-shield-alt"&gt;&lt;/i&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;安全可靠&lt;/h3&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;银行级加密技术，保障数据安全&lt;/p&gt;<br>
                &nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&lt;div class="feature"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;i class="fas fa-expand-arrows-alt"&gt;&lt;/i&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;可扩展性&lt;/h3&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;随业务增长灵活扩展，满足不同需求&lt;/p&gt;<br>
                &nbsp;&nbsp;&lt;/div&gt;<br>
                &lt;/div&gt;
            </div>
        </div>

        <div class="section">
            <h2 class="section-title"><i class="fas fa-quote-left"></i>3. 客户评价 (Testimonials)</h2>
            <p>展示满意客户的评价和成功案例，增加可信度和社交证明。</p>

            <div class="block-demo">
                <div class="testimonials">
                    <div class="testimonial">
                        <p class="testimonial-text">"这个产品彻底改变了我们的工作方式，效率提升了200%，非常值得投资！"</p>
                        <div class="testimonial-author">
                            <div class="author-avatar">JD</div>
                            <div>
                                <strong>John Doe</strong>
                                <p>ABC公司首席执行官</p>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial">
                        <p class="testimonial-text">"我们尝试了很多解决方案，这是唯一一个真正满足我们所有需求的平台，客服支持也非常出色。"</p>
                        <div class="testimonial-author">
                            <div class="author-avatar">SM</div>
                            <div>
                                <strong>Sarah Miller</strong>
                                <p>XYZ科技技术总监</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <button class="toggle-code" onclick="toggleCode('testimonialsCode')">显示/隐藏代码</button>
            <div class="code-block" id="testimonialsCode">
                &lt;div class="testimonials"&gt;<br>
                &nbsp;&nbsp;&lt;div class="testimonial"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;p class="testimonial-text"&gt;"这个产品彻底改变了我们的工作方式..."&lt;/p&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="testimonial-author"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="author-avatar"&gt;JD&lt;/div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;strong&gt;John Doe&lt;/strong&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;ABC公司首席执行官&lt;/p&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&lt;div class="testimonial"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;p class="testimonial-text"&gt;"我们尝试了很多解决方案..."&lt;/p&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="testimonial-author"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="author-avatar"&gt;SM&lt;/div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;strong&gt;Sarah Miller&lt;/strong&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;XYZ科技技术总监&lt;/p&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&lt;/div&gt;<br>
                &lt;/div&gt;
            </div>
        </div>

        <div class="section">
            <h2 class="section-title"><i class="fas fa-tags"></i>4. 定价板块 (Pricing)</h2>
            <p>清晰展示不同套餐的价格和功能，帮助用户选择最适合的方案。</p>

            <div class="block-demo">
                <div class="pricing">
                    <div class="pricing-plan">
                        <h3>基础版</h3>
                        <div class="price">¥99<span>/月</span></div>
                        <ul class="pricing-features">
                            <li>最多5个用户</li>
                            <li>10GB存储空间</li>
                            <li>基本分析功能</li>
                            <li>电子邮件支持</li>
                        </ul>
                        <a href="#" class="cta-button">选择计划</a>
                    </div>
                    <div class="pricing-plan popular">
                        <h3>专业版</h3>
                        <div class="price">¥199<span>/月</span></div>
                        <ul class="pricing-features">
                            <li>最多20个用户</li>
                            <li>50GB存储空间</li>
                            <li>高级分析功能</li>
                            <li>优先支持</li>
                        </ul>
                        <a href="#" class="cta-button">选择计划</a>
                    </div>
                    <div class="pricing-plan">
                        <h3>企业版</h3>
                        <div class="price">¥399<span>/月</span></div>
                        <ul class="pricing-features">
                            <li>无限用户</li>
                            <li>200GB存储空间</li>
                            <li>定制分析功能</li>
                            <li>24/7专属支持</li>
                        </ul>
                        <a href="#" class="cta-button">选择计划</a>
                    </div>
                </div>
            </div>

            <button class="toggle-code" onclick="toggleCode('pricingCode')">显示/隐藏代码</button>
            <div class="code-block" id="pricingCode">
                &lt;div class="pricing"&gt;<br>
                &nbsp;&nbsp;&lt;div class="pricing-plan"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;基础版&lt;/h3&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="price"&gt;¥99&lt;span&gt;/月&lt;/span&gt;&lt;/div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class="pricing-features"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;最多5个用户&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;10GB存储空间&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;基本分析功能&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;电子邮件支持&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#" class="cta-button"&gt;选择计划&lt;/a&gt;<br>
                &nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&lt;div class="pricing-plan popular"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;专业版&lt;/h3&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="price"&gt;¥199&lt;span&gt;/月&lt;/span&gt;&lt;/div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class="pricing-features"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;最多20个用户&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;50GB存储空间&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;高级分析功能&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;优先支持&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#" class="cta-button"&gt;选择计划&lt;/a&gt;<br>
                &nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&lt;div class="pricing-plan"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;企业版&lt;/h3&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="price"&gt;¥399&lt;span&gt;/月&lt;/span&gt;&lt;/div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class="pricing-features"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;无限用户&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;200GB存储空间&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;定制分析功能&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;24/7专属支持&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#" class="cta-button"&gt;选择计划&lt;/a&gt;<br>
                &nbsp;&nbsp;&lt;/div&gt;<br>
                &lt;/div&gt;
            </div>
        </div>

        <div class="section">
            <h2 class="section-title"><i class="fas fa-question-circle"></i>5. 常见问题解答 (FAQ)</h2>
            <p>解答用户可能遇到的常见问题，减少支持请求并提高转化率。</p>

            <div class="block-demo">
                <div class="faq">
                    <div class="faq-item">
                        <div class="faq-question" onclick="toggleFaq(this)">
                            如何开始免费试用？ <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            <p>只需点击页面顶部的"免费试用"按钮，填写基本信息即可立即开始30天免费试用，无需提供信用卡信息。</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question" onclick="toggleFaq(this)">
                            支持哪些支付方式？ <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            <p>我们支持信用卡（Visa、MasterCard、American Express）、PayPal以及银行转账等多种支付方式。</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question" onclick="toggleFaq(this)">
                            能否随时取消订阅？ <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            <p>是的，您可以随时在账户设置中取消订阅，取消后服务将持续到当前计费周期结束。</p>
                        </div>
                    </div>
                </div>
            </div>

            <button class="toggle-code" onclick="toggleCode('faqCode')">显示/隐藏代码</button>
            <div class="code-block" id="faqCode">
                &lt;div class="faq"&gt;<br>
                &nbsp;&nbsp;&lt;div class="faq-item"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="faq-question" onclick="toggleFaq(this)"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如何开始免费试用？ &lt;i class="fas fa-chevron-down"&gt;&lt;/i&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="faq-answer"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;只需点击页面顶部的"免费试用"按钮...&lt;/p&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&lt;div class="faq-item"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="faq-question" onclick="toggleFaq(this)"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;支持哪些支付方式？ &lt;i class="fas fa-chevron-down"&gt;&lt;/i&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="faq-answer"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;我们支持信用卡（Visa、MasterCard...&lt;/p&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&lt;div class="faq-item"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="faq-question" onclick="toggleFaq(this)"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;能否随时取消订阅？ &lt;i class="fas fa-chevron-down"&gt;&lt;/i&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="faq-answer"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;是的，您可以随时在账户设置中取消订阅...&lt;/p&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&lt;/div&gt;<br>
                &lt;/div&gt;
            </div>
        </div>

        <div class="section">
            <h2 class="section-title"><i class="fas fa-id-card"></i>6. 联系表单/CTA (Contact Form)</h2>
            <p>提供联系方式或表单，方便潜在客户与企业取得联系。</p>

            <div class="block-demo">
                <div
                    style="max-width: 500px; margin: 0 auto; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);">
                    <h3 style="text-align: center; margin-bottom: 20px;">联系我们</h3>
                    <form>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">姓名</label>
                            <input type="text"
                                style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">邮箱</label>
                            <input type="email"
                                style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">消息</label>
                            <textarea
                                style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; height: 120px;"></textarea>
                        </div>
                        <button type="submit"
                            style="width: 100%; padding: 12px; background: #3498db; color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer;">发送消息</button>
                    </form>
                </div>
            </div>

            <button class="toggle-code" onclick="toggleCode('contactCode')">显示/隐藏代码</button>
            <div class="code-block" id="contactCode">
                &lt;div style="max-width: 500px; margin: 0 auto; padding: 20px; background: white; border-radius: 8px;
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);"&gt;<br>
                &nbsp;&nbsp;&lt;h3 style="text-align: center; margin-bottom: 20px;"&gt;联系我们&lt;/h3&gt;<br>
                &nbsp;&nbsp;&lt;form&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="margin-bottom: 15px;"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label style="display: block; margin-bottom: 5px; font-weight:
                bold;"&gt;姓名&lt;/label&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" style="width: 100%; padding: 10px; border: 1px
                solid #ddd; border-radius: 4px;"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="margin-bottom: 15px;"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label style="display: block; margin-bottom: 5px; font-weight:
                bold;"&gt;邮箱&lt;/label&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="email" style="width: 100%; padding: 10px; border:
                1px solid #ddd; border-radius: 4px;"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="margin-bottom: 15px;"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label style="display: block; margin-bottom: 5px; font-weight:
                bold;"&gt;消息&lt;/label&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea style="width: 100%; padding: 10px; border: 1px solid
                #ddd; border-radius: 4px; height: 120px;"&gt;&lt;/textarea&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;button type="submit" style="width: 100%; padding: 12px; background: #3498db;
                color: white; border: none; border-radius: 4px; font-weight: bold; cursor:
                pointer;"&gt;发送消息&lt;/button&gt;<br>
                &nbsp;&nbsp;&lt;/form&gt;<br>
                &lt;/div&gt;
            </div>
        </div>

        <div class="footer">
            <h3>企业营销页面常见区块示例</h3>
            <p>这些区块可以根据实际需求进行组合和调整，以创建高效的企业营销页面</p>
            <div class="footer-links">
                <a href="#">首页</a>
                <a href="#">关于我们</a>
                <a href="#">服务</a>
                <a href="#">案例研究</a>
                <a href="#">博客</a>
                <a href="#">联系我们</a>
            </div>
            <p style="margin-top: 20px;">© 2023 公司名称. 保留所有权利.</p>
        </div>
    </div>

    <script>
        function toggleCode(id) {
            const codeBlock = document.getElementById(id);
            codeBlock.style.display = codeBlock.style.display === 'none' ? 'block' : 'none';
        }

        function toggleFaq(element) {
            const faqItem = element.parentElement;
            faqItem.classList.toggle('active');

            const icon = element.querySelector('i');
            if (faqItem.classList.contains('active')) {
                icon.classList.remove('fa-chevron-down');
                icon.classList.add('fa-chevron-up');
            } else {
                icon.classList.remove('fa-chevron-up');
                icon.classList.add('fa-chevron-down');
            }
        }
    </script>
</body>

</html>